<template>
  <view class="container whov">
    <IFexHeaderMain>
      <template #header>
        <IHeader>统计详情</IHeader>
        <view class="table-row header-row" style="padding: 0 16rpx 8rpx 16rpx">
          <view class="table-cell" v-for="(title, index) in tableTitles" :key="index">
            {{ title }}
          </view>
        </view>
      </template>
      <view class="statistics-container wh_auto" style="padding: 0 16rpx" v-if="dataList.length > 0">
        <view class="table-row data-row" :class="index % 2 === 1 ? 'even-row' : ''" v-for="(item, index) in dataList" :key="index">
          <view class="table-cell">{{ item.createTimes }}</view>
          <view class="table-cell">{{ item.ddSum }}</view>
          <view class="table-cell">{{ item.userSum }}</view>
          <view class="table-cell" v-if="isShowPriceOrderVail">{{ item.orderAmount }}</view>
          <view class="table-cell" v-if="isShowPriceTKVail">{{ item.tkSum }}</view>
        </view>
      </view>
      <view class="wrapper whov" v-if="dataList.length === 0">
        <view class="empty-state"> 暂无数据 </view>
      </view>
    </IFexHeaderMain>
  </view>
</template>

<script setup lang="ts" name="StatisticsDetail">
  import { nextTick, onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getNetworkPointOrderDetails } from '@/api/zmanager/outlets'
  import useToastMsg from '@/hooks/sysMsg'
  import useUserInfoStore from '@/store/userInfo'
  const detail = ref<any>({ id: '', name: '' })
  onLoad((options: any) => {
    detail.value.id = options.id
  })
  const userInfoStore = useUserInfoStore()
  const isShowPriceOrderVail = ref(false)
  const isShowPriceTKVail = ref(false)
  const toastMsg = useToastMsg()
  const tableTitles = ref(['日期', '订单数', '订单用户数'])
  const dataList = ref<any[]>([])
  onMounted(() => nextTick(() => init()))
  const init = async () => {
    if (userInfoStore.getUserInfo.type == '02' || userInfoStore.getUserInfo.type == '05'|| userInfoStore.getUserInfo.type == '07') {
      isShowPriceTKVail.value = true
      isShowPriceOrderVail.value = true
      tableTitles.value = ['日期', '订单数', '订单用户数', '订单金额', '退款金额']
    } else {
      isShowPriceTKVail.value = false
      isShowPriceOrderVail.value = false
      tableTitles.value = ['日期', '订单数', '订单用户数']
    }

    toastMsg.showLoading()
    const result = await getNetworkPointOrderDetails(detail.value.id)
    if (result) {
      dataList.value = result.data.voList
    }
    toastMsg.hideLoading()
  }
</script>

<style scoped lang="scss">
  .statistics-container {
    background-color: #fff;
  }

  /* 表格行基础样式：无边界 + Flex 布局 */
  .table-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }

  /* 表头行样式：无边界 + 小字体 + 浅背景 */
  .header-row {
    background-color: #f5f7fa;
    font-weight: 500; /* 降低加粗程度 */
  }

  /* 数据行样式 + 斑马纹（无边界） */
  .data-row {
    color: #666;
  }
  .data-row.even-row {
    background-color: #f9fafd; /* 偶数行颜色（浅蓝灰色） */
  }

  /* 单元格核心样式：无边界 + 平均分配 + 小字体 */
  .table-cell {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16rpx 0;
    font-size: 24rpx; /* 缩小文字（原26rpx → 24rpx） */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 移除所有边框 */
    border: none;
  }
</style>
